<template>
	<view style="background: #FAFAFC;">
		<nav-bar-project></nav-bar-project>
		<view style="margin-top:13px;padding: 0 16px;">
			<view class="flex flex-row" style="height: 38px;background: #FFFFFF;position: relative;">
				<view class="inputlable"></view>
				<view class="inputcontent"><u--input placeholder="请输入内容" border="surround" v-model="projectListQuery.projectname"></u--input></view>
				<view style="background: #FE7743;font-size: 10px;font-weight: 600;color: #FFFFFF;padding: 8px 13px;position: absolute;top: 3px;right: 4px;" @click="handleFilter">
					搜索
				</view>
			</view>
		</view>
		<view class="flex flex-row justify-evenly items-center" style="margin-top:30px;font-size: 12px;font-weight: 400;color: #000000;background-color: #FFFFFF;height:32px;">
			<!-- <view>省份</view>
			<view>产业</view>
			<view>需求</view>
			<view>级别</view> -->
			<view class="root"><ren-dropdown-filter :filterData="filterData" :defaultIndex="defaultIndex" @onSelected="onSelected"></ren-dropdown-filter></view>
		</view>
		<view class="flex justify-center items-center" style="margin-top:30px;padding-bottom:20px;font-size: 12px;font-weight: 500;color: #9C9C9C;">
			共有符合条件的园区
			<view style="color: #FE7743;">{{ total }}</view>
			家
		</view>
		<view style="padding: 0px 17px;">
			<view
				v-for="(item, index) in projectList"
				:key="index"
				class="flex flex-col"
				style="margin-bottom:15px;padding:14px 17px;border: solid 1px #EDEDED;background-color: #FFFFFF;"
				@click="goToProjectDetailView(item.id)"
			>
				<view style="font-size: 13px;font-weight: 400;color: #000000;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">{{ item.projectname }}</view>
				<view class="flex flex-row" style="margin-top:13px;">
					<view v-for="(bqitem, bqindex) in item.biaoqianArr" :key="bqindex" style="font-size: 10px;border:solid 1px #FE7743;color:#FE7743;margin-right:7px;">
						{{ bqitem }}
					</view>
				</view>
				<view class="flex flex-row" style="margin-top: 12px;">
					<view class="flex-1 pt-2.5 text-sm text-[#EE1A23]">
						<view style="font-size: 13px;font-weight: 500;color: #EE1A23;">
							{{ item.touziyuji }}
							<span style="font-size: 11px;font-weight: 400;color: #EE1A23;">万元</span>
						</view>
						<view style="font-size: 11px;font-weight: 400;color: #746F6B;">投资总额</view>
					</view>
					<view class="flex-1 pt-2.5 text-sm text-[#EE1A23]">
						<view style="font-size: 13px;font-weight: 500;color: #EE1A23;">
							{{ item.shuishouyuji }}
							<span style="font-size: 11px;font-weight: 400;color: #EE1A23;">万元</span>
						</view>
						<view style="font-size: 11px;font-weight: 400;color: #746F6B;">预计缴税</view>
					</view>
					<view class="flex justify-end items-end pt-2.5 text-sm text-[#EE1A23]">
						<view class="" style="font-size: 9px;font-weight: 400;color: #8D8D8D;">{{ item.luodishijian }} 发布</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			total: 0,
			pageNum: 1,
			pageSize: 10,
			queryOption: 0,
			orderbyfield: '',
			projectList: [],
			projectListQuery: {
				projectname: ''
			},
			filterData: [
				[
					{ text: '省份', province: '' },
					{ text: '北京', province: 110000000000 },
					{ text: '天津', province: 120000000000 },
					{ text: '河北', province: 130000000000 },
				 { text: '山西', province: 140000000000 },
					{ text: '辽宁', province: 210000000000 },
					{ text: '吉林', province: 220000000000 },
					{ text: '黑龙江', province: 230000000000 },
					{ text: '上海', province: 310000000000 },
					{ text: '江苏', province: 320000000000 },
					{ text: '浙江', province: 330000000000 }
				],

				[
					{ text: '产品类型', hangyeleixing: '' },
					{ text: '生物医药', hangyeleixing: 1 },
					{ text: '医疗器械', hangyeleixing: 2 },
					{ text: '大健康', hangyeleixing: 3 },
					{ text: '人工智能', hangyeleixing: 4 },
					{ text: '文化创意', hangyeleixing: 5 },
					{ text: '汽车配件', hangyeleixing: 6 },
					{ text: '新材料', hangyeleixing: 7 },
					{ text: '教育培训', hangyeleixing: 8 },
					{ text: '游戏动漫', hangyeleixing: 9 },
					{ text: '元宇宙', hangyeleixing: 10 },
					{ text: '软件互联网', hangyeleixing: 11 }
				],

				[{ text: '需求类型', xiangmuleixing: '' }, { text: '仓库', xiangmuleixing: 1 }, { text: '厂房', xiangmuleixing: 2 }, { text: '写字楼', xiangmuleixing: 3 }],

				[{ text: '对接级别', duijiejibie: '' }, { text: '对接中', duijiejibie: 1 }, { text: '已对接', duijiejibie: 2 }]
			],
			defaultIndex: [0, 0, 0, 0]
		};
	},
	onLoad(option) {
		this.projectListQuery.projectname = option.projectname;
		if (this.projectListQuery.projectname) {
			this.getProjectList();
		} else {
			this.namegetProjectList();
		}
	},
	// components:{
	//             RenDropdownFilter
	//         },
	// onPullDownRefresh() {

	// if(this.projectListQuery.projectname){
	// 	this.getProjectList();
	// }else{
	// 	this.namegetProjectList()
	// }
	// },
	onReachBottom() {
		// if(this.projectListQuery.projectname){
		// 	this.getProjectList();
		// }else{
		// 	this.namegetProjectList()
		// }
		if (this.projectListQuery.projectname) {
			console.log(this.pageNum);
			if (this.pageNum < Math.ceil(this.total / 10)) {
				this.pageNum += 1;
				this.getProjectList();
			}
		} else {
			console.log(this.pageNum);
			if (this.pageNum < Math.ceil(this.total / 10)) {
				this.pageNum += 1;
				this.namegetProjectList();
			}
		}
	},
	methods: {
		handleFilter() {
			// if(this.projectListQuery.projectname){
			// 	this.getProjectList();
			// }else{
			// 	this.namegetProjectList()
			// }
			this.projectList = [];
			this.getProjectList();
		},
		getProjectList() {
			let that = this;
			this.$apiCall.request(
				'post',
				`/project/list?projectname=${that.projectListQuery.projectname}&pageNum=${that.pageNum}&pageSize=${that.pageSize}&queryOption=${that.queryOption}&orderbyfield=${
					that.orderbyfield
				}`,
				{},
				{
					sucCb(data) {
						// uni.stopPullDownRefresh();
						that.total = data.total;
						// if(that.total>10){
						// 	that.projectList =that.projectList.concat( data.data);
						// }else{
						// if(that.pageNum <= Math.ceil(that.total/10)){
						// that.pageNum += 1
						that.projectList = that.projectList.concat(data.data);

						// }
						// }
					}
				}
			);
		},
		namegetProjectList() {
			// if(this.total!=0){
			// 	this.pageNum += 1
			// }
			// this.pageNum += 1
			let that = this;
			this.$apiCall.request(
				'post',
				`/project/list?pageNum=${that.pageNum}&pageSize=${that.pageSize}&queryOption=${that.queryOption}&orderbyfield=${that.orderbyfield}`,
				{},
				{
					sucCb(data) {
						// uni.stopPullDownRefresh();
						that.total = data.total;
						// that.projectList = data.data;
						// that.projectList =that.projectList.concat( data.data);

						// if(that.pageNum <= Math.ceil(that.total/10)){
						// that.pageNum += 1
						that.projectList = that.projectList.concat(data.data);

						// }
					}
				}
			);
		},
		goToProjectDetailView(id) {
			uni.navigateTo({
				url: `/pages/project/detail?id=${id}`
			});
		},
		onSelected(res) {
			this.projectListQuery.projectname = '';
			console.log(res, 111);
			let that = this;
			this.$apiCall.request(
				'post',
				`/project/list?pageNum=${that.pageNum}&pageSize=${that.pageSize}&queryOption=${that.queryOption}&orderbyfield=${that.orderbyfield}
						&province=${res[0][0].province}&hangyeleixing=${res[1][0].hangyeleixing}&xiangmuleixing=${res[2][0].xiangmuleixing}&duijiejibie=${res[3][0].duijiejibie}`,
				{},
			{
						sucCb(data) {
						that.total = data.total;
						that.projectList = data.data;
					}
				}
			);
		}
	}
};
</script>

<style lang="scss"></style>
